{% extends 'layouts/box.html' %}

{% block optional %}
<div>
  <ul class="text-center flex font-bold md:text-lg rounded-t-2xl
             text-slate-500 dark:text-slate-100 bg-slate-200 dark:bg-slate-700 creme:text-stone-600 creme:bg-stone-400
             divide-x divide-slate-300 dark:divide-slate-800 creme:divide-stone-500
             [&>li>a]:w-full [&>li]:w-1/2 [&>li>a]:py-2">
    <li class="rounded-tl-2xl hover:bg-primary creme:hover:bg-stone-500">
        <a href="{% url 'add_pdf' %}" class="inline-block hover:border-b-2 hover:border-primary">Individual</a>
    </li>
    <li class="rounded-tr-2xl hover:bg-primary creme:hover:bg-stone-500">
        <a href="{% url 'bulk_add_pdfs' %}" class="inline-block border-b-2 border-primary ">Bulk</a>
    </li>
  </ul>
</div>
{% endblock %}

{% block content %}
<h1>Bulk Add PDF Files</h1>
<h2 class="mb-6 truncate">{{ pdf_name }}</h2>

<div x-data="{ in_progress: false, show_additional: false }">
    <form x-on:submit="in_progress = true" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            {{ form.tag_string.errors }}
            {{ form.tag_string }}
            <span class="helptext" id="{{ form.tag_string.auto_id }}_helptext">
                {{ form.tag_string.help_text|safe }}
            </span>
        </p>
        <p>
            {{ form.description.errors }}
            {{ form.description }}
            <span class="helptext" id="{{ form.description.auto_id }}_helptext">
                {{ form.description.help_text|safe }}
            </span>
        </p>
        <p>
            {{ form.file.errors }}
            {{ form.file }}
        </p>
        <p class="-mt-1">
            <label
                    class="w-auto! mr-2 inline-block! text-gray-600 dark:text-slate-300 creme:text-stone-600"
                    for="id_skip_existing">Skip existing files:</label>
            <input class="w-auto!" type="checkbox" name="skip_existing" id="id_skip_existing"  checked>
        </p>
        {% include 'includes/add_pdf_optionals.html' %}
    </form>
</div>
{% endblock %}
